<template>
  <div>
    <el-container class="mainindex">
      <el-header>
        <el-row>
          <el-col :span="3" class="color">
            <div class="grid-content bg-purple"></div>
          </el-col>
          <el-col :span="18">
            <div class="grid-content bg-purple-light">
              <div class="header-top">
                <div class="header-top-left">
                  <a href="javascript:;">
                    <span class="el-icon-s-platform"></span>
                    五邑大学招聘
                  </a>
                </div>
                <div class="header-top-mid">
                  <div style="margin-top: 15px">
                    <el-input
                      clearable
                      placeholder="请输入内容"
                      v-model="input3"
                      class="input-with-select"
                    >
                      <el-button
                        slot="append"
                        icon="el-icon-search"
                      ></el-button>
                    </el-input>
                  </div>
                </div>
                <div class="header-top-right">
                  <div v-show="loginstatus">
                    <a href="javascript:;" @click="jumpRegister">注册</a>
                    <a href="javascript:;" @click="jumpLogin">登录</a>
                  </div>
                  <div v-show="!loginstatus">
                    <div class="loginname">
                      您好！<span>{{ $store.state.userdata.userName }}</span>
                    </div>
                    <a
                      href="javascript:;"
                      class="active"
                      @click="dialogVisible = true"
                      >退出登录</a
                    >
                  </div>
                </div>
              </div>
            </div>
            <div class="header-bottom">
              <div class="header-bottom-left">
                <a href="javascript:;">
                  <img
                    src="//cimg.zhaopin.cn/img/newIndexImages/logo.png"
                    alt=""
                  />
                </a>
              </div>
              <div class="header-bottom-right">
                <el-menu class="el-menu-demo" mode="horizontal">
                  <el-menu-item
                    @click="saveNavState(menu)"
                    :index="menu.id"
                    v-for="menu in menulist"
                    :key="menu.id"
                  >
                    <template slot="title">
                      <span>{{ menu.name }}</span>
                    </template>
                  </el-menu-item>
                </el-menu>
              </div>
            </div>
          </el-col>
          <el-col :span="3" class="color">
            <div class="grid-content bg-purple"></div>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <div class="banner">
          <template>
            <el-carousel indicator-position="outside" height="400px">
              <el-carousel-item v-for="item in 4" :key="item">
                <h3>{{ item }}</h3>
              </el-carousel-item>
            </el-carousel>
          </template>
        </div>
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        </el-row>

        <div class="box-it">
          <i></i>
          <span>IT/互联网/通信/电子</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
        <div class="box-jinrong">
          <i></i>
          <span>金融行业</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        </el-row>

        <div class="box-fangdichan">
          <i></i>
          <span>房地产行业</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        </el-row>

        <div class="box-qichezhizao">
          <i></i>
          <span>汽车、制造</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
      </el-main>
      <el-footer>
        <div class="footer-top">
          <div class="student-name">
            <div class="studentimg">
              <img
                src="//cimg.zhaopin.cn/img/newIndexImages/footerlogo.png"
                alt=""
              />
            </div>
            <div class="platform">大学生求职平台</div>
          </div>
          <div class="imformation">
            <div class="imformation1"><a href="javascript:;">关于我们</a></div>
            <div class="imformation2"><a href="javascript:;">联系方式</a></div>
            <div class="imformation3"><a href="javascript:;">客户服务</a></div>
            <div class="imformation4"><a href="javascript:;">法律声明</a></div>
            <div class="imformation5"><a href="javascript:;">隐私策略</a></div>
            <div class="imformation6"><a href="javascript:;">发票制度</a></div>
            <div class="imformation7"><a href="javascript:;">用户协议</a></div>
          </div>
        </div>
        <div class="footer-mid"></div>
        <div class="footer-bottom">
          <div>
            <p>
              未经Zhaopin.com同意，不得转载本网站之所有招聘信息及作品
              智联招聘网版权所有
            </p>
            <p>
              京ICP备12025925号 京ICP证010207号 电信业务审批[2001]字第233号函
              京公网安备 11010502002133号
            </p>
          </div>
        </div>
      </el-footer>
    </el-container>

    <!-- 退出登录弹出对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      @close="handleClose"
    >
      <span>是否退出登录？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="loginout">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //控制退出登录对话框的显示与隐藏
      dialogVisible: false,
      //控制登录状态
      loginstatus: true,
      menulist: [
        { index: 1, name: "首页" },
        { index: 2, name: "找实习" },
        { index: 3, name: "找全职" },
        { index: 4, name: "文章发表", path: "discuss" },
        { index: 5, name: "讨论区", path: "leavemessage" },
        { index: 6, name: "个人中心", path: "pindex" },
      ],
      input1: "",
      input2: "",
      input3: "",
      select: "",
    };
  },
  created() {
    if (sessionStorage.getItem("usermeg")) {
      let usermeg = JSON.parse(sessionStorage.getItem("usermeg"));
      this.$store.commit("setUserdata", usermeg);
      console.log("2", usermeg);
    }
    if (this.$store.state.userdata.role) {
      this.loginstatus = false;
    }
    // console.log("1", this.$store.state.userdata);
  },
  methods: {
    //跳到登录界面
    jumpLogin() {
      this.$router.push("/login");
    },
    //跳转到注册页面
    jumpRegister() {
      this.$router.push("/uregister");
    },
    // 跳转指定后台页面
    saveNavState(menu) {
      if (menu.index == 6) {
        if (!this.$store.state.userdata.role)
          return this.$message.error("你还没登录，请先登录！");

        if (this.$store.state.userdata.role === "2") {
          this.$router.push("/" + "pindex");
        } else {
          this.$router.push("/" + "bindex");
        }
      } else {
        this.$router.push("/" + menu.path);
      }
    },
    handleClose() {},
    //确定退出登录
    async loginout() {
      this.dialogVisible = false;
      this.loginstatus = !this.loginstatus;
      // this.$store.state.userdata = null;
      this.$store.commit("setUserdata", "null");
      let datas = window.sessionStorage.getItem("usermeg");
      console.log(JSON.parse(datas));
      const data = await this.$http.post("/exit", JSON.parse(datas));
      console.log(data);
      // setTimeout(() => {
      //   window.sessionStorage.clear("token");
      // }, 1);
      window.sessionStorage.clear("token");
    },
  },
};
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}

.el-header {
  padding: 0;
  margin: 0;
  // background-color: rgb(95, 160, 168);
  height: 100px !important;
  a {
    text-decoration: none;
    color: black;
  }
  .el-row {
    height: 60px;
  }
}

.color {
  // background-color: rgb(141, 148, 76);
  height: 100%;
}
.header-top {
  position: relative;
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  background-color: #fff;
  .header-top-left {
    float: left;
  }
  .header-top-right {
    float: right;
    width: 160px;
    height: 40px;

    .active {
      color: blue;
      float: right;
      height: 40px;
      line-height: 40px;
    }
    .loginname {
      width: 100px;
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    a {
      margin-right: 5px;
      float: right;
    }
  }
  .header-top-mid {
    width: 700px;
    position: absolute;
    top: -15px;
    left: 196px;
  }
}

.header-bottom {
  .header-bottom-left {
    float: left;
    // z-index: 999;
    margin: 12px 0;
  }
  .header-bottom-right {
    float: right;
    .el-menu {
      height: 60px;
      border: none;
      .el-menu-item {
        margin-left: 80px;
        font-weight: 700;
        padding: 0;
      }
    }
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
/*页面公司信息展示*/
.el-main {
  margin: 0 auto;
  width: 1180px;
  .banner {
    width: 1139px;
    margin: 0 auto;
    .el-carousel__item h3 {
      color: #475669;
      font-size: 18px;
      opacity: 0.75;
      line-height: 400px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 200px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
}

.el-footer {
  .footer-top {
    width: 1139px;
    margin: 0 auto;
    position: relative;
    .imformation {
      display: flex;
      width: 800px;
      position: absolute;
      left: 0px;
      top: 110px;

      div {
        width: 100px;
        font-size: 18px;
        font-weight: 700;
        margin-right: 30px;
        a {
          text-decoration: none;
          color: #000;
        }
      }
    }
    .student-name {
      margin-top: 50px;
      .studentimg {
        float: left;
      }
      .platform {
        float: left;
        font-size: 25px;
        margin-left: 50px;
        height: 50px;
        line-height: 50px;
      }
    }
  }
  .footer-mid {
    border-bottom: 5px solid #eee;
    margin-top: 200px;
  }
  .footer-bottom {
    position: relative;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 50px;
    width: 1139px;
    height: 50px;
    div {
      position: absolute;
      left: 0;
      font-size: 12px;
      color: #aaa;
    }
  }
}

.box-it,
.box-jinrong,
.box-fangdichan,
.box-qichezhizao {
  position: relative;
  width: 1139px;
  height: 40px;
  i {
    position: absolute;
    left: 0;
    background: #24adde;
    display: inline-block;
    height: 22px;
    margin-right: 15px;
    vertical-align: middle;
    width: 5px;
  }
  span {
    position: absolute;
    left: 15px;
    float: left;
  }
}
</style>
